<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="min-height: 200px; overflow-y: hidden; text-align: left;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange="handleChange"
    />
  </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted, nextTick, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from 'axios'
import {getToken} from '@/utils/auth'
// 初始值
const props = defineProps({
  initValue: String
})
const emits = defineEmits(['getEditorContent'])
// const emits = defineEmits([''])
let mode = ref('default')
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/soa-file/upload");
const headerObj = ref({'Authorization': 'Bearer ' + getToken()})
// 内容 HTML
const valueHtml = ref('')
// 模拟 ajax 异步获取内容
onMounted(() => {
  nextTick(() => { // 界面节点更新完以后再修改值。
    valueHtml.value = props.initValue
  })
})
// 工具栏配置
const toolbarConfig = {
  toolbarKeys: [
    // 菜单 key
    'headerSelect',
    'bold', // 加粗
    'italic', // 斜体
    'through', // 删除线
    'underline', // 下划线
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'color', // 文字颜色
    'insertLink', // 插入链接
    'fontSize', // 字体大小
    'lineHeight', // 行高
    'uploadImage', // 上传图片
    'delIndent', // 缩进
    'indent', // 增进
    'deleteImage',//删除图片
    'divider', // 分割线
    'insertTable', // 插入表格
    'justifyCenter', // 居中对齐
    'justifyJustify', // 两端对齐
    'justifyLeft', // 左对齐
    'justifyRight', // 右对齐
    'undo', // 撤销
    'redo', // 重做
    'clearStyle', // 清除格式
    'fullScreen' // 全屏
  ]
}

const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {},
  hoverbarKeys: {
    'image': {
      // 清空 image 元素的 hoverbar
      menuKeys: []
    }
  }
}
// 上传图片
editorConfig.MENU_CONF['uploadImage'] = {
  // 上传图片的接口地址
  server: "http://localhost/dev-api/soa-file/upload",
  // form-data fieldName ，默认值 'wangeditor-uploaded-image'
  fieldName: 'file',

  // 单个文件的最大体积限制，默认为 2M
  maxFileSize: 5 * 1024 * 1024, // 5M

  // 最多可上传几个文件，默认为 100
  maxNumberOfFiles: 20,

  // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  allowedFileTypes: ['image/png,image/jpeg,image/jpg'],

  // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
  // meta: {
  //     token: 'xxx',
  //     otherKey: 'yyy'
  // },

  // 将 meta 拼接到 url 参数中，默认 false
  metaWithUrl: false,

  // 自定义增加 http  header
  headers: headerObj,

  // 跨域是否传递 cookie ，默认为 false
  withCredentials: true,

  // 超时时间，默认为 10 秒
  timeout: 5 * 1000, // 5 秒
  // 上传之前触发
  onBeforeUpload(file) {
    // file 选中的文件，格式如 { key: file }
    let fileObj = Object.values(file)[0].data
    const isJPG = (fileObj.type == 'image/jpg' || fileObj.type == 'image/jpeg' ||  fileObj.type == 'image/png')
    if (!isJPG) {
      proxy.$message.warning('图片只能是 JPG、GIF、PNG 格式!')
    }
    // 判断图片宽高
    // 定义 filereader对象

    // 判断图片大小
    let isLt = fileObj.size / 1024 / 1024 < 5 // 判断是否小于5M
    if (!isLt) {
      proxy.$message.warning('图片大小不能超过5M! 请重新上传')
    }
    if (!isJPG) {
      return false
    } else if (!isLt) {
      return false
    } else {
      return file
    }
    // 可以 return
    // 1. return file 或者 new 一个 file ，接下来将上传
    // 2. return false ，不上传这个 file
  },
  // 上传进度的回调函数
  onProgress(progress) {
    // progress 是 0-100 的数字
    console.log('progress', progress)
  },
  // 单个文件上传成功之后
  onSuccess(file, res) {
    console.log(`${file.name} 上传成功`, res)
  },
  // 自定义插入图片
  customInsert(res, insertFn) {
    // res 即服务端的返回结果
    // 从 res 中找到 url alt href ，然后插图图片
    console.log(`上传成功`, res)
    // insertFn(res.data.url, '', '')
  },
  // 单个文件上传失败
  onFailed(file, res) {
      console.log(`${file.name} 上传失败`, res)
  },
  // 上传错误，或者触发 timeout 超时
  onError(file, err, res) {
    console.log(`${file.name} 上传出错`, err, res)
  }
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  editorRef.value = editor // 创建富文本编辑器
}
const handleChange = (info) => {
  // info.children 数组包含了数据类型和内容，valueHtml.value内容的html格式
  emits('getEditorContent', info.children, valueHtml.value)
}
watch(()=>props.initValue, (value) => {  // 父组件获取初始值
  valueHtml.value = value
})
</script>
